<template>
  <div class="container">
    <div class="box">
      <!-- 顶部栏 -->
      <div class="top">
        <top-header></top-header>
      </div>

      <!-- 占位，解决顶部栏固定后挡住下面内容 -->
      <div class="place"></div>

      <div class="find">
        <div class="opreate">
          <n-statistic tabular-nums>
            共为你准备了
            <b class="job-num">
              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="jobList.length" />
            </b>
            个职位！
          </n-statistic>
          <div class="search-job">
            <n-input-group>
              <n-input size="large" :style="{ width: '50%' }" placeholder="职位名称或者关键字" v-model:value="searchValue">
                <template #prefix>
                  <n-icon>
                    <svg-icon name="magnifier"></svg-icon>
                  </n-icon>
                </template>
              </n-input>
              <n-input size="large" :style="{ width: '50%' }" placeholder="工作地点" v-model:value="jobCity">
                <template #prefix>
                  <n-icon>
                    <svg-icon name="coordinate"></svg-icon>
                  </n-icon>
                </template>
              </n-input>
            </n-input-group>
            <n-button type="success" size="large" @click="search">找工作</n-button>
          </div>
        </div>
        <n-image :src="Shout" />
      </div>
    </div>

    <div class="job-list">
      <p class="area-title">当前最流行的工作</p>

      <n-tabs default-value="all-job" size="large" justify-content="space-evenly" @before-leave="handleBeforeLeave"
        animated>
        <n-tab-pane name="all-job" tab="所有">
          <div class="job-list-detail">
            <JobItem v-for="(item, index) in jobList" :key="index" @click="toDetail(item.id)" :info="item" />
          </div>
        </n-tab-pane>
        <n-tab-pane name="1" tab="前端">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="2" tab="Java">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="3" tab="嵌入式">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="4" tab=".NET">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="5" tab="测试">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="6" tab="运维">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="7" tab="大数据">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="8" tab="人工智能">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="9" tab="数据库">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
        <n-tab-pane name="10" tab="网络安全">
          <JobItem v-for="(item, index) in sortList" :key="index" @click="toDetail(item.id)" :info="item" />
        </n-tab-pane>
      </n-tabs>
    </div>

    <!-- 应聘步骤 -->
    <div class="img-step">
      <n-image width="600" :src="Campaign" />
      <div>
        <p class="area-title">简单几步，帮你快速找到工作！</p>
        <ul class="step">
          <li>
            <n-gradient-text type="info"> 01 </n-gradient-text>
            在线生成简历
          </li>
          <li>
            <n-gradient-text type="info"> 02 </n-gradient-text>
            浏览招聘信息
          </li>
          <li>
            <n-gradient-text type="info"> 03 </n-gradient-text>
            投递简历
          </li>
        </ul>
      </div>
    </div>

    <footer class="footer">
      <p class="title">友情链接</p>
      <ul>
        <li v-for="(item, index) in link" :key="index">
          <n-avatar size="medium" round
            :src="item.src" />
          <a :href="item.href" target="_blank">{{item.name}}</a>
        </li>
        
      </ul>
    </footer>
  </div>
  <n-back-top :right="100" />
</template>

<script setup>
import { useRoute, useRouter } from "vue-router"
import TopHeader from "@/components/TopHeader.vue"
// 引入子组件
import Company from "./components/Company"
import JobItem from "./components/JobItem"
import { ref, reactive, onMounted, computed, onBeforeMount } from "vue"
// 引入接口
import {
  getCompanyList,
  getJobList,
  getCategory,
  searchJob,
  loadListAPI,
} from "@/http/api/company.js"
import { react } from "@babel/types"
// 实例化路由对象
const route = useRoute()
const router = useRouter()
const Shout = ref(require("../../assets/imgs/jobSquare/shout.png"))
const Campaign = ref(require("../../assets/imgs/jobSquare/Campaign.png"))
// 定义一些属性
// 职位列表
const jobList = ref([])
// 分类列表
const sortList = ref([])
// 搜索框的值
const searchValue = ref("")
// 搜索框的城市名
const jobCity = ref("")

// 友情链接
const link = reactive([
  {
    src:'https://bkimg.cdn.bcebos.com/pic/d0c8a786c9177f3e86141a2b78cf3bc79f3d56f0?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg',
    href:'https://www.aiit.edu.cn/',
    name:'安徽信息工程学院'
  },
  {
    src:'https://img.bosszhipin.com/beijin/mcs/banner/cc4c1e2eeb992499380cc90275606247cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0',
    href:'https://www.iflytek.com/index.html',
    name:'科大讯飞'
  },
  {
    src:'https://img.bosszhipin.com/beijin/mcs/bar/brand/12456.jpg?x-oss-process=image/resize,w_120,limit_0',
    href:'https://www.bilibili.com/',
    name:'BiliBIli'
  },
  {
    src:'https://img.bosszhipin.com/beijin/upload/com/logo/20200429/8f64c9d0b30a53c434b26799ca78966cec9b49ecaf1604cb263748f03d5c2b0f.png?x-oss-process=image/resize,w_120,limit_0',
    href:'https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent',
    name:'华为'
  },
  {
    src:'https://img.bosszhipin.com/beijin/mcs/chatphoto/20201123/6a4f3bc17c6a4f8fea5a9ba01cb22bcd82e5997348729a6cfe816ad90c892e55_s.jpg',
    href:'https://www.bytedance.com/',
    name:'字节跳动'
  },
  {
    src:'https://img.bosszhipin.com/beijin/upload/com/logo/20201124/46586243f12f020f37da8dedbc1894e9eced799b706888d6653a36e808bf8bb4.jpg?x-oss-process=image/resize,w_100,limit_0',
    href:'https://www.microsoft.com/zh-cn/',
    name:'微软'
  },
  {
    src:'https://img.bosszhipin.com/beijin/mcs/bar/20200430/4204e9c9f200b00b77fb59d093acd281be1bd4a3bd2a63f070bdbdada9aad826.jpg?x-oss-process=image/resize,w_100,limit_0',
    href:'https://www.tencent.com/zh-cn',
    name:'腾讯'
  },
  {
    src:'https://img.bosszhipin.com/beijin/upload/com/logo/20190621/948be55d91ad0928995c51107c5caf942679d766b05d3a47a291674c9a99db9b.png?x-oss-process=image/resize,w_100,limit_0',
    href:'https://zhaopin.jd.com/home;jsessionid=CDAA6D069C7F10097AB8BFEB7921358D.s1',
    name:'京东'
  },
  {
    src:'https://img.bosszhipin.com/beijin/mcs/banner/71f4ee09b9a2abfb675b5c705fc46c9dcfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_100,limit_0',
    href:'https://hr.xiaomi.com/',
    name:'小米'
  },
  {
    src:'https://img.bosszhipin.com/beijin/upload/com/workfeel/20220316/7bf6f160950405e9282fe33181a1523803562870c4e2cc4a242ac4eb7bbd10d1694083156ab76fdb.jpg?x-oss-process=image/resize,w_100,limit_0',
    href:'https://talent.alibaba.com/',
    name:'阿里巴巴'
  },
  {
    src:'https://img.bosszhipin.com/beijin/mcs/banner/5ceba8561d592ff6849e8a0525aacbfecfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_100,limit_0',
    href:'https://www.chinasofti.com/',
    name:'中软国际'
  },
  {
    src:'https://img.bosszhipin.com/beijin/upload/com/workfeel/20210722/270509fa82dd4e7a6e1cea4e38c6bb455b5d53c8d16eb634483c07a2a1294204.jpg?x-oss-process=image/resize,w_100,limit_0',
    href:'http://www.dcits.com/',
    name:'神州信息'
  },
  
])
// 搜索按钮绑定事件
const search = () => {
  const data = {
    name: searchValue.value,
    city: jobCity.value,
  }
  searchJob(data)
    .then((res) => {
      jobList.value = {}
      jobList.value = res.result
      // console.log("搜索的数据", res.result)
      searchValue.value = ""
      jobCity.value = ""
    })
    .catch((err) => {
      console.log(err)
    })
}
// 跳转公司详情页面
const toDetail = (id) => {
  router.push({
    path: "/job-detail",
    query: {
      id: id,
    },
  })
}
// //获取公司列表数据
// const getData = () => {
//   getCompanyList()
//     .then((res) => {
//       jobList.value.push(...res.result)
//     })
//     .catch((err) => {
//       console.log(err)
//     })
// }

//获取职位列表数据
const getJobData = () => {
  getJobList()
    .then((res) => {
      // console.log(res.result)
      jobList.value = res.result
    })
    .catch((err) => {
      console.log(err)
    })
}
//获取tab栏标题数据
const getTabList = () => {
  loadListAPI()
    .then((result) => {
      console.log(result.result)
    })
    .catch((err) => {
      console.log(err)
    })
}

//获取分类职位列表数据
const getCategoryList = (typeid) => {
  const param = { tid: typeid }
  getCategory(param)
    .then((res) => {
      sortList.value = res.result
    })
    .catch((err) => {
      console.log(err)
    })
}
// 切换tab触发的事件
const handleBeforeLeave = (tabName) => {
  switch (tabName) {
    case "1":
      getCategoryList(1)
      return true
    case "2":
      getCategoryList(2)
      return true
    case "3":
      getCategoryList(3)
      return true
    case "4":
      getCategoryList(4)
      return true
    case "5":
      getCategoryList(5)
      return true
    case "6":
      getCategoryList(6)
      return true
    case "7":
      getCategoryList(7)
      return true
    case "8":
      getCategoryList(8)
      return true
    case "9":
      getCategoryList(9)
      return true
    case "10":
      getCategoryList(10)
      return true
    default:
      return true
  }
}

onMounted(() => {
  // getData()
  getJobData()
  // getTabList()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // background-color: #f0f8ff;

  .box {
    width: 100%;
    height: 100vh;
    background-image: url("../../assets/imgs/jobSquare/naiyoulv.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .top {
      position: fixed;
      background-color: #fff;
      width: 100%;
      z-index: 9999;
    }

    .place {
      height: 80px;
    }
  }

  .area-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding: 30px 0px;
  }

  .img-step {
    padding: 30px 100px;
    display: flex;
    justify-content: space-around;

    .step {
      font-size: 26px;

      li {
        padding: 20px 0px;
      }

      .n-gradient-text {
        font-size: 36px;
        font-weight: bold;
      }
    }
  }

  .card-tabs .n-tabs-nav--bar-type {
    padding-left: 4px;
  }

  .job-list {
    padding: 30px 200px;

    .job-list-detail {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }

  .footer {
    background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);
    height: 300px;
    color: #fff;
    padding: 30px;

    .title {
      font-size: 28px;
      font-weight: bold;
    }

    ul {
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      li {
        display: flex;
        align-items: center;
        width: 20%;
        padding: 0px 0px 20px 20px;
        a {
          text-decoration: none;
          color: white;
          padding-left: 10px;
        }

        a:hover {
          text-decoration: none;
          color: #36c97b;
        }
      }
    }
  }
}

.find {
  display: flex;
  justify-content: space-around;
  align-items: center;
  ::v-deep(.n-image){
    img{
      width: 95%;
    }
  }
  .opreate{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95%;
    .job-num{
      color: #18a058;
    }
  }

  ::v-deep(.n-statistic-value__content) {
    font-size: 38px;
    font-weight: bold;
  }

  .search-job {
    margin-top: 50px;
    display: flex;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
  }

  ::v-deep(n-statistic-value__content) {
    font-size: 50px;
  }

  .n-input {
    line-height: 4;
  }

  .n-button {
    height: 60px;
    width: 130px;
  }
}
</style>
